vue3
<!-- author: xuett -->
<!-- date: 2025-03-19 09:24:40 -->
<!-- description: 校验弹窗 -->
<template>
  <el-dialog v-model="dialogVisible" title="页面校验" width="700px" @close="close">
    <div class="check-box">
      <!-- 校验进度提示 -->
      <div v-show="!hasError" class="check-process">
        <img class="check-img" src="@/assets/images/container/check_bg.png" alt="" />
        <div class="check-tip">当前页面正在校验中，请稍等~</div>
        <div class="process-box">
          <el-progress :percentage="progress" :status="progress == 100 ? 'success' : ''" />
        </div>
        <div class="next-btn">
          <el-button v-show="progress == 100" type="primary">下一步</el-button>
        </div>
      </div>
      <!--  校验结果 -->
      <div v-show="hasError" class="check-result">
        <!-- 错误提示 -->
        <div class="error-tip">
          <el-icon class="tip-icon" color="#F5222D"><WarningFilled /></el-icon>当前页面内容填写错误，请更改标红的内容
        </div>
        <div class="error-content">
          <div class="error-row" v-for="item in errorList" :key="item.name">
            <div class="error-row-name">{{ item.name }}:</div>
            <div class="error-row-value">{{ item.value }}</div>
          </div>
        </div>
        <!-- 内容修改 -->
        <div class="modify-title">
          <div class="left-title">请修改</div>
          <div class="right-btn">
            <el-button type="primary" link>一键更改</el-button>
            <el-button type="primary" link>查看教育部文档</el-button>
          </div>
        </div>
        <div class="modify-form">
          <div class="modify-form-item" v-for="item in modifyForm" :key="item.prop">
            <div class="form-item-name">{{ item.name }}:</div>
            <div class="form-item-value">
              <el-input v-model="item.value" placeholder="请输入更改内容"></el-input>
            </div>
          </div>
        </div>
        <div class="verify-btn">
          <el-button type="primary">重新校验</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
const state = reactive({
  dialogVisible: false,
  hasError: false,
  progress: 50,
  errorList: [
    {
      name: "专业名称",
      value: "人工智能技术与应用"
    },
    {
      name: "专业代码",
      value: "720212"
    }
  ],
  modifyForm: [
    {
      name: "专业名称",
      prop: "l00003",
      value: ""
    },
    {
      name: "专业代码",
      prop: "l00004",
      value: ""
    }
  ]
});
const { dialogVisible, progress, hasError, errorList, modifyForm } = toRefs(state);

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});

//打开弹窗
var timer = null;
const show = () => {
  state.dialogVisible = true;
  timer = setInterval(() => {
    state.progress += 5;
    if (state.progress >= 100) {
      clearInterval(timer);
      timer = null;
    }
  }, 200);
};

//关闭
const close = () => {
  state.dialogVisible = false;
  state.progress = 50;
};

defineExpose({ show });
</script>

<style scoped lang="scss">
.check-box {
  width: 100%;
  padding: 14px 8px 0;
  .check-process {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 24px;
    .check-img {
      display: block;
      width: 204px;
      height: 169px;
    }
    .check-tip {
      font-family: Alibaba PuHuiTi-Regular;
      font-size: 16px;
      color: rgba($color: #000000, $alpha: 0.85);
      line-height: 22px;
      margin: 36px 0 20px 0;
    }
    .process-box {
      width: 385px;
    }
    .el-progress--line {
      max-width: 383px;
    }
    .next-btn {
      height: 32px;
      display: flex;
      justify-content: center;
      margin: 32px 0 0;
    }
  }
  .check-result {
    width: 100%;
    padding-bottom: 10px;
    .error-tip {
      width: 100%;
      font-family: Alibaba PuHuiTi-Medium;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      display: flex;
      align-items: center;
      .tip-icon {
        margin-right: 10px;
      }
    }
    .error-content {
      width: 100%;
      background-color: #f5f6f7;
      padding: 8px 17px;
      margin: 30px 0 24px;
      .error-row {
        padding-left: 15px;
        font-family: Alibaba PuHuiTi-Regular;
        font-size: 14px;
        line-height: 30px;
        display: flex;
        align-items: center;
        position: relative;
        &::before {
          content: "";
          display: block;
          width: 3px;
          height: 3px;
          background-color: #000;
          position: absolute;
          left: 5px;
          top: 13px;
        }
        .error-row-name {
          color: #000000;
          margin-right: 5px;
        }
        .error-row-value {
          color: #f5222d;
        }
      }
    }
    .modify-title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 22px;
      .left-title {
        font-family: Alibaba PuHuiTi-Regular;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
      }
    }
    .modify-form {
      width: 100%;
      margin-top: 12px;
      .modify-form-item {
        margin-bottom: 8px;
        width: 100%;
        font-family: Alibaba PuHuiTi-Regular;
        display: flex;
        align-items: center;
        padding-left: 20px;
        position: relative;
        &::before {
          content: "";
          display: block;
          width: 3px;
          height: 3px;
          background-color: #000;
          position: absolute;
          left: 10px;
          top: 13px;
        }
        .form-item-name {
          font-size: 14px;
          color: #333333;
          line-height: 16px;
          margin-right: 5px;
        }
        .form-item-value {
          width: 224px;
        }
      }
    }
    .verify-btn {
      display: flex;
      justify-content: flex-end;
      margin-top: 40px;
      .el-button {
        width: 140px;
      }
    }
  }
}
</style>
